<template>
  <div class="developmentHistory">
    <div class="topheader">
      <img src="/image/aboutus/round.png" alt="" />
      <div class="warptext">
        <div class="title">发展历程</div>
        <div class="subtitle">Development Course</div>
      </div>
    </div>
    <div class="content">
      <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/timerShaft.png-1593654607000" alt="" />
      <div class="item item1 green">
        <div>2016年</div>
        <div>公司注册成立</div>
      </div>
      <div class="item item2 orange">
        <div>2016年9月</div>
        <div>公司正式营业</div>
      </div>
      <div class="item item3 pink">
        <div>2017年</div>
        <div>公司第一次乔迁</div>
      </div>
      <div class="item item4 blue">
        <div>2018年</div>
        <div>公司进入快速发展期</div>
      </div>
      <div class="item item5 green">
        <div>2019年</div>
        <div>打造生意港平台</div>
      </div>
      <div class="item item6 orange">
        <div>2019年</div>
        <div>生意港平台注册成立</div>
      </div>
      <div class="item item7 pink">
        <div>2020年</div>
        <div>公司快速发展期</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:"linkUs-developmentHistory"
}
</script>
<style lang="scss" scoped>
.developmentHistory {
  position: relative;
}
.topheader {
  margin-bottom: 1520px;
  width: 1030px;
  height: 658px;
  position: relative;
  background: url("http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/developmentHistorybg.png-1593654438000");
  img {
    width: 195px;
    height: 271px;
    margin-top: 77px;
    margin-left: 258px;
  }
  .warptext {
    display: inline-block;
    position: absolute;
    top: 157px;
    left: 405px;
    .title {
      font-size: 86px;
      letter-spacing: 17px;
      background: linear-gradient(
        123deg,
        rgba(73, 193, 255, 1) 0%,
        rgba(115, 54, 207, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .subtitle {
      display: inline-block;
      font-size: 39px;
      letter-spacing: 2px;
      color: #888787;
    }
  }
}
.content {
  top: 402px;
  left: 272px;
  position: absolute;
  img {
    height: 1639px;
  }
  .item {
    position: absolute;
    div:last-of-type {
      font-size: 24px;
      letter-spacing: 0px;
      color: #2f2f2f;
    }
    div:first-of-type {
      font-size: 32px;
      letter-spacing: 0px;
    }
  }
  .item1 {
    top: 149px;
    left: -172px;
  }
  .item2 {
    top: 347px;
    right: -172px;
  }
  .item3 {
    top: 557px;
    left: -172px;
  }
  .item4 {
    top: 753px;
    right: -286px;
  }
  .item5 {
    top: 1043px;
    left: -172px;
  }
  .item6 {
    top: 1235px;
    right: -286px;
  }
  .item7 {
    top: 1445px;
    left: -172px;
  }
  .green {
    color: #1d9f96;
  }
  .orange {
    color: #ed9127;
  }
  .pink {
    color: #dc2d75;
  }
  .blue {
    color: #1b70b0;
  }
}
</style>
